<template>
    <div class="spatialSampling">
        <el-button @click="back">返回</el-button>
        <div id="map"></div>
    </div>
</template>

<script>
import $ from 'jquery';
import dd from '../../../public/china.json';
export default {
    components: {},
    data() {
        return {
            max: 10,
            provinces: [],
            citys: []
        };
    },
    mounted() {
        var that = this
        that.axios
            .get('http://192.168.2.225:8080/com.huidian.rem/CountBycity')
            .then((res) => {
                var data = res.data;
                var max = 0
                for (let key in data[0]) {
                    let count = data[0][key]
                    if (count > max) {
                        max = count
                    }
                    that.provinces[key] = count
                }
                that.max = max
                for (let key in data[1]) {
                    let city = {
                        from: '河南',
                        to: data[1][key]
                    };
                    that.citys.push(city);
                }
                console.log(that.provinces);
                // console.log(that.citys);
                that.showmap()
            })
            .catch((error) => {
                console.log('暂无数据');
            });
    },
    computed: {},
    methods: {
        showmap() {
            var mapv = require('mapv');
            var map = new window.BMap.Map('map', {
                enableMapClick: false
            }); // 创建Map实例
            map.centerAndZoom(new window.BMap.Point(105.403119, 38.028658), 5); // 初始化地图,设置中心点坐标和地图级别
            map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放

            map.setMapStyle({
                styleJson: [
                    {
                        featureType: 'water',
                        elementType: 'all',
                        stylers: {
                            color: '#031628'
                        }
                    },
                    {
                        featureType: 'land',
                        elementType: 'geometry',
                        stylers: {
                            color: '#000102'
                        }
                    },
                    {
                        featureType: 'highway',
                        elementType: 'geometry.fill',
                        stylers: {
                            color: '#000000'
                        }
                    },
                    {
                        featureType: 'highway',
                        elementType: 'geometry.stroke',
                        stylers: {
                            color: '#147a92'
                        }
                    },
                    {
                        featureType: 'arterial',
                        elementType: 'geometry.fill',
                        stylers: {
                            color: '#000000'
                        }
                    },
                    {
                        featureType: 'arterial',
                        elementType: 'geometry.stroke',
                        stylers: {
                            color: '#0b3d51'
                        }
                    },
                    {
                        featureType: 'local',
                        elementType: 'geometry',
                        stylers: {
                            color: '#000000'
                        }
                    },
                    {
                        featureType: 'railway',
                        elementType: 'geometry.fill',
                        stylers: {
                            color: '#000000'
                        }
                    },
                    {
                        featureType: 'railway',
                        elementType: 'geometry.stroke',
                        stylers: {
                            color: '#08304b'
                        }
                    },
                    {
                        featureType: 'subway',
                        elementType: 'geometry',
                        stylers: {
                            lightness: -70
                        }
                    },
                    {
                        featureType: 'building',
                        elementType: 'geometry.fill',
                        stylers: {
                            color: '#000000'
                        }
                    },
                    {
                        featureType: 'all',
                        elementType: 'labels.text.fill',
                        stylers: {
                            color: '#857f7f'
                        }
                    },
                    {
                        featureType: 'all',
                        elementType: 'labels.text.stroke',
                        stylers: {
                            color: '#000000'
                        }
                    },
                    {
                        featureType: 'building',
                        elementType: 'geometry',
                        stylers: {
                            color: '#022338'
                        }
                    },
                    {
                        featureType: 'green',
                        elementType: 'geometry',
                        stylers: {
                            color: '#062032'
                        }
                    },
                    {
                        featureType: 'boundary',
                        elementType: 'all',
                        stylers: {
                            color: '#465b6c'
                        }
                    },
                    {
                        featureType: 'manmade',
                        elementType: 'all',
                        stylers: {
                            color: '#022338'
                        }
                    },
                    {
                        featureType: 'label',
                        elementType: 'all',
                        stylers: {
                            color: '#022338',
                            visibility: 'off'
                        }
                    }
                ]
            });

            var geojsonOptions = {
                gradient: {
                    0: 'rgba(255,240,0, 0)',
                    0.1: 'rgba(255,224,0, 0.1)',
                    0.2: 'rgba(255,208,0, 0.2)',
                    0.3: 'rgba(255,192,0, 0.3)',
                    0.4: 'rgba(255,176,0, 0.4)',
                    0.5: 'rgba(255,160,0,  0.5)',
                    0.6: 'rgba(255,144,0, 0.6)',
                    0.7: 'rgba(255,128,0, 0.7)',
                    0.8: 'rgba(255,112,0, 0.8)',
                    0.9: 'rgba(255,96,0, 0.9)',
                    1: 'rgba(255,80,0, 1)'
                },
                max: this.max,
                draw: 'intensity'
            };
            var geojsonDataSet = mapv.geojson.getDataSet(dd);
            console.log(geojsonDataSet);

            var qianxi = new mapv.DataSet(this.citys);
            // var from = '河南';
            // var qianxi = new mapv.DataSet([
            //     {
            //         from: from,
            //         count: 10,
            //         to: '河北'
            //     },
            //     {
            //         from: from,
            //         count: 20,
            //         to: '天津'
            //     },
            //     {
            //         from: from,
            //         count: 30,
            //         to: '山东'
            //     },
            //     {
            //         from: from,
            //         count: 40,
            //         to: '山西'
            //     },
            //     {
            //         from: from,
            //         count: 16650,
            //         to: '黑龙江'
            //     },
            //     {
            //         from: from,
            //         count: 14379,
            //         to: '辽宁'
            //     },
            //     {
            //         from: from,
            //         count: 60,
            //         to: '河南'
            //     },
            //     {
            //         from: from,
            //         count: 70,
            //         to: '内蒙古自治区'
            //     },
            //     {
            //         from: from,
            //         count: 80,
            //         to: '江苏'
            //     },
            //     {
            //         from: from,
            //         count: 90,
            //         to: '上海'
            //     },
            //     {
            //         from: from,
            //         count: 100,
            //         to: '广东'
            //     },
            //                 {
            //         from: from,
            //         count: 110,
            //         to: '黑龙江'
            //     }
            // ]);

            var qianxiData = qianxi.get();
            var lineData = [];
            var pointData = [];
            var textData = [];
            var timeData = [];

            // 生成线条所需的数据
            for (var i = 0; i < qianxiData.length; i++) {
                var fromCenter = mapv.utilCityCenter.getCenterByCityName(qianxiData[i].from);
                var toCenter = mapv.utilCityCenter.getCenterByCityName(qianxiData[i].to);
                if (!fromCenter || !toCenter) {
                    continue;
                }
                pointData.push({
                    geometry: {
                        type: 'Point',
                        coordinates: [fromCenter.lng, fromCenter.lat]
                    }
                });
                pointData.push({
                    geometry: {
                        type: 'Point',
                        coordinates: [toCenter.lng, toCenter.lat]
                    }
                });
                textData.push({
                    geometry: {
                        type: 'Point',
                        coordinates: [fromCenter.lng, fromCenter.lat]
                    },
                    text: qianxiData[i].from
                });
                textData.push({
                    geometry: {
                        type: 'Point',
                        coordinates: [toCenter.lng, toCenter.lat]
                    },
                    text: qianxiData[i].to
                });

                var curve = mapv.utilCurve.getPoints([fromCenter, toCenter]);

                for (var j = 0; j < curve.length; j++) {
                    timeData.push({
                        geometry: {
                            type: 'Point',
                            coordinates: curve[j]
                        },
                        count: 1,
                        time: j
                    });
                }

                lineData.push({
                    geometry: {
                        type: 'LineString',
                        coordinates: curve
                        //coordinates: [[fromCenter.lng, fromCenter.lat], [toCenter.lng, toCenter.lat]]
                    },
                    count: 30 * Math.random()
                });
            }
            var citys = this.provinces
            var data = geojsonDataSet.get({
                filter: function (item) {
                    if (!citys[item.name]) {
                        return false;
                    }

                    item.count = citys[item.name];
                    return true;
                }
            });
            geojsonDataSet = new mapv.DataSet(data);

            var mapvLayer = new mapv.baiduMapLayer(map, geojsonDataSet, geojsonOptions);

            var textDataSet = new mapv.DataSet(textData);

            var textOptions = {
                draw: 'text',
                font: '14px Arial',
                fillStyle: 'white',
                shadowColor: 'yellow',
                shadowBlue: 10,
                zIndex: 11,
                shadowBlur: 10
            };

            var textMapvLayer = new mapv.baiduMapLayer(map, textDataSet, textOptions); // eslint-disable-line no-unused-vars

            var lineDataSet = new mapv.DataSet(lineData);

            var lineOptions = {
                strokeStyle: 'rgba(255, 250, 50, 0.8)',
                shadowColor: 'rgba(255, 250, 50, 1)',
                shadowBlur: 20,
                lineWidth: 2,
                zIndex: 100,
                draw: 'simple'
            };

            var lineLayer = new mapv.baiduMapLayer(map, lineDataSet, lineOptions); // eslint-disable-line no-unused-vars

            var pointOptions = {
                fillStyle: 'rgba(254,175,3,0.7)',
                shadowColor: 'rgba(55, 50, 250, 0.5)',
                shadowBlur: 10,
                size: 5,
                zIndex: 10,
                draw: 'simple'
            };

            var pointDataSet = new mapv.DataSet(pointData);

            var pointLayer = new mapv.baiduMapLayer(map, pointDataSet, pointOptions); // eslint-disable-line no-unused-vars

            var timeDataSet = new mapv.DataSet(timeData);

            var timeOptions = {
                fillStyle: 'rgba(255, 250, 250, 0.5)',
                zIndex: 200,
                size: 2.5,
                animation: {
                    type: 'time',
                    stepsRange: {
                        start: 0,
                        end: 50
                    },
                    trails: 10,
                    duration: 2
                },
                draw: 'simple'
            };

            var timeMapvLayer = new mapv.baiduMapLayer(map, timeDataSet, timeOptions); // eslint-disable-line no-unused-vars
        },
        back() {
            window.location.href = './#/stumanager';
        },
    },
};
</script>

<style lang="scss" scoped>
.spatialSampling {
    width: 100%;
    height: 100%;
    
    #map {
        width: 100%;
        height: 100%;
    }
}
</style>
<style>
/*去除百度地图版权*/
.anchorBL {
    display: none;
}
</style>
